<template>
  <div class="shopping-trolley">
    <div class="trolley-header">
        <span class="left_icon fa fa-2x fa-angle-left returnLeave" @click="returnLeave"></span>
      <span class="trolleyTitle">购物车</span>
      <span class="compileShopping" @click="editCommodity" v-show="!isAchieve">编辑</span>
      <span class="compileShopping" @click="accomplish" v-show="isAchieve">完成</span>
    </div>
    <div class="trolley-bodyer">
      <div class="checkShop">
        <!--<img src="../assets/图标-单选默认.png" v-show="!isCheck" @click="checkWhether"/>-->
        <!--<img src="../assets/选择-勾选 (1).png" v-show="isCheck" @click="checkWhether"/>-->
        <van-checkbox class="checkBox" v-model="checked"></van-checkbox><span class="checkTitle">快捷商城自营</span>
      </div>
      <div class="ShoppingCart">
        <ul>
          <li v-for="(item, key) in commodNewArr" :key="key">
            <!--<img class="isCheck" src="../assets/图标-单选默认.png" v-show="!isTicked" @click="tickedWhether"/>-->
            <!--<img class="isCheck" src="../assets/选择-勾选 (1).png" v-show="isTicked" @click="tickedWhether"/>-->
            <van-checkbox class="isCheck" v-model="item.checked" @change="checkCommodity"></van-checkbox>
            <div class="commodityPhoto">
              <img :src="item.prod.prodImage[0]"/>
            </div>
            <p class="commodityTitle">{{item.prod.prodSupTitle}}</p>
            <span class="commoditySprice">￥{{item.prod.currentPrice}}</span>
            <div class="commodNumber">
              <div class="reduce" @click="reduceNub(key)">-</div>
              <div class="itesNumber">
                <input type="text" v-model.sync="item.num"/>
              </div>
              <div class="augment" @click="augmentNub(key)">+</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="amountTotal" v-show="!isHidden">
      <!--<img src="../assets/图标-单选默认.png" v-show="!isSelect" @click="selectWhether"/>-->
      <!--<img src="../assets/选择-勾选 (1).png" v-show="isSelect" @click="selectWhether"/>-->
      <van-checkbox class="toCheck" v-model="checked" @change="checkedAll"></van-checkbox>
      <p class="addUpTo">合计：<span class="amount">￥{{this.commodityPrice}} </span><span class="freight">不含运费</span></p>
      <p class="discounts">已优惠金额：￥ 0</p>
      <div class="aggregate" @click="confirmAnOrder">结算({{this.commodity.length}})</div>
    </div>
    <div class="delectTotal" v-show="isHidden">
      <!--<img src="../assets/图标-单选默认.png" v-show="!isSelect" @click="selectWhether"/>-->
      <!--<img src="../assets/选择-勾选 (1).png" v-show="isSelect" @click="selectWhether"/>-->
      <van-checkbox class="checkAll" v-model="checked"></van-checkbox>
      <div class="delectBtn" @click="delCommodity">删除({{this.commodity.length}})</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shopping-trolley',
  data() {
    return {
      index: [],
      commodNewArr: [],
      isCheck: false,
      isTicked: false,
      isSelect: false,
      isHidden: false,
      checked: false,
      isAchieve: false,
      commodity: [],
      commodityItem: '0',
      commodityPrice: 0,

    }
  },
  methods:{
    returnLeave() {
      this.$router.push('/myMall');
    },
    // checkWhether() {
    //   this.isCheck = !this.isCheck;
    // },
    // tickedWhether() {
    //   this.isTicked = !this.isTicked;
    // },
    // selectWhether() {
    //   this.isSelect = !this.isSelect;
    // },
    checkedAll() {
      for (let i = 0; i < this.commodNewArr.length; i++) {
        this.commodNewArr[i].checked = this.checked;
      }
    },
    editCommodity() {
      this.isHidden = !this.isHidden;
      this.isAchieve = !this.isAchieve;
    },
    accomplish() {
      this.isAchieve = !this.isAchieve;
      this.isHidden = !this.isHidden;
    },
    reduceNub(key) {
      this.commodNewArr[key].num--;
      if (this.commodNewArr[key].num < 1) {
        this.$toast('数量不能少于1');
        this.commodNewArr[key].num = 1;
      }
      this.$request.updateCart({
        cartid: this.commodNewArr[key]._id,
        num: this.commodNewArr[key].num,
      })
        .then((res) => {
          console.log(res);
          this.commodityPrice = 0;
          for (let prop in this.commodNewArr) {
            if (this.commodNewArr[prop].checked){
              this.commodityPrice += this.commodNewArr[prop].prod.currentPrice * this.commodNewArr[prop].num;
            }

          }
        })
        .catch((error) => console.log(error));
    },
    augmentNub(key) {
      this.commodNewArr[key].num++;
      this.$request.updateCart({
        cartid: this.commodNewArr[key]._id,
        num: this.commodNewArr[key].num,
      })
        .then((res) => {
          console.log(res);
          this.commodityPrice = 0;
          for (let prop in this.commodNewArr) {
            if (this.commodNewArr[prop].checked) {
              this.commodityPrice += this.commodNewArr[prop].prod.currentPrice * this.commodNewArr[prop].num;
            }
          }
        })
        .catch((error) => console.log(error));
    },
    checkCommodity() {
      this.commodity = [];
      this.commodityItem = '0';
      this.commodityPrice = 0;
      for (let prop in this.commodNewArr) {
        if (this.commodNewArr[prop].checked) {
          this.commodity.push(this.commodNewArr[prop]._id);
          this.commodityItem = this.commodity.length;
          this.commodityPrice += this.commodNewArr[prop].prod.currentPrice * this.commodNewArr[prop].num;
          if (this.commodityItem === this.commodNewArr.length) {
            this.checked = true;
          }else {
            this.checked = false;
          }
        }
      }
    },
    confirmAnOrder() {
      if (this.commodity.length < 1) {
        this.$toast('您还没有选择宝贝哦');
      }
    },
    delCommodity() {
      this.$request.delcart({
        cartids: this.commodity,
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            for (let i = 0; i < this.commodNewArr.length; i++){
              if (this.commodNewArr[i].checked) {
                this.commodNewArr.splice(i,1);
                i--;
              }
            }
          }
        })
        .catch((error) => console.log(error));
    }
  },
  created() {
    this.$request.getCart()
      .then((res) => {
        console.log(res);
        this.commodNewArr = res.data.data;
      })
      .catch((error) => console.log(error));
  },
};
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .trolley-header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
  }
  .returnLeave{
    position: absolute;
    top: 15px;
    left: 20px;
  }
  .compileShopping{
    position: absolute;
    top: 0;
    right: 40px;
  }
  .trolley-bodyer{
    width: 100vw;
    height: 92vh;
    background: #f9faf7;
    margin: 81px 0;
  }
  .checkShop{
    width: 100vw;
    height: 60px;
    line-height: 60px;
    background: #fff;
    position: relative;
  }
  .checkBox{
    /*width: 30px;*/
    /*height: 30px;*/
    position: absolute;
    top: 0;
    left: 20px;
  }
  .checkTitle{
    margin-left: 60px;
  }
  .ShoppingCart li{
    width: 100vw;
    height: 180px;
    background: #fff;
    border-top: 1px solid #ebebeb;
    position: relative;
  }
  .isCheck{
    width: 30px;
    position: absolute;
    top: 80px;
    left: 20px;
  }
  .commodityPhoto{
    width: 130px;
    height: 130px;
    background: #0077aa;
    position: absolute;
    top: 30px;
    left: 70px;
    border-radius: 5px;
    overflow: hidden;
  }
  .commodityPhoto>img{
    width: 130px;
    height: 130px;
  }
  .commodityTitle{
    position: absolute;
    left: 220px;
    top: 30px;
    height: 30px;
    /*width: 350px;*/
    overflow: hidden;
    font-size: 25px;
  }
  .commoditySprice{
    position: absolute;
    top: 130px;
    left: 220px;
    color: #e94926;
  }
  .commodNumber{
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: inline-block;
    border: 1px solid #bbb;
    border-radius: 10px;
    width: 180px;
    height: 50px;
  }
  .commodNumber>div{
    float: left;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
  }
  .reduce{
    width: 30%;
    height: 50px;
    border-right: 1px solid #bbb;
  }
  .itesNumber{
    width: 40%;
    height: 50px;
  }
  .itesNumber>input{
    width: 60px;
    height: 40px;
    border: none;
    text-align: center;
  }
  .augment{
    width: 30%;
    height: 50px;
    border-left: 1px solid #bbb;
  }
  .amountTotal{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 80px;
    background: #fff;
  }
  .toCheck{
    /*width: 35px;*/
    /*height: 35px;*/
    position: absolute;
    top: 25px;
    left: 25px;
  }
  .addUpTo{
    position: absolute;
    top: 10px;
    left: 80px;
    font-size: 26px;
  }
  .amount{
    color: #e94926;
  }
  .freight{
    font-size: 13px;
    color: #a8a8a8;
  }
  .discounts{
    position: absolute;
    top: 50px;
    left: 80px;
    font-size: 16px;
  }
  .aggregate{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #458df7;
    color: #fff;
  }
  .delectTotal{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100vw;
    height: 80px;
    background: #fff;
  }
  .checkAll{
    /*width: 35px;*/
    /*height: 35px;*/
    position: absolute;
    top: 25px;
    left: 25px;
  }
  .delectBtn{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #ea5331;
    color: #fff;
  }
</style>
